<template>
	<!-- 	:class="extend == true? 'overflow':''" -->
	<view style="height: 100vh;">
		<!-- 	<view class="position-relative " style="height: 620rpx;">
			<image src="https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/shengchengqi/datapic/1.jpg" mode="aspectFill"
				style="height:590rpx;" class="bg-secondary w-100"></image>
			<image src="https://profile-avatar.csdnimg.cn/3365568353cd44c2acf217ab8b6345f9_weixin_47365777.jpg!1"
				style="width: 120rpx;height: 120rpx;right: 30rpx;"
				class="bg-secondary rounded position-absolute bottom-0" mode=""></image>
			<text class="text-white font-md position-absolute " style="bottom: 45rpx;right:165rpx">赵奕航</text>
		</view> -->
		<view class="flex justify-between align-center position-fixed top-0 w-100 "
			:class="num > 1? 'bgwhit':'bgtrans' " style="z-index: 9;">
			<view class="flex flex-row align-center">
				<free-icon-button @click="back" :class="num > 1? 'colwhit':'coltrans'">&#xe60d;</free-icon-button>
				<text :class="num > 1? 'colwhit':'coltrans'">朋友圈</text>
			</view>
			<view>
				<free-icon-button @click="addmoment" :class="num > 1? 'colwhit':'coltrans'">&#xe682;</free-icon-button>
			</view>
		</view>
		<free-transparent-bar></free-transparent-bar>
		<view v-for="item,index in list">
			<free-moment-list :item="item" :index="index" @action="actionclick"></free-moment-list>
			<!-- <free-avater size="120" :src="item.avatar">
			</free-avater>
			<view class="pl-2 flex-1 flex flex-column">
				<text class="font-md text-hover-primary mb-1">{{item.username}}</text>
				<text class="font-md text-dark mb-1">{{item.content}}</text>
				<view class="py-2 flex flex-wrap" v-if="item.image.length">
					<block v-for="item1 in item.image">
						<image src="../../../../static/lyc.jpg" class="rounded"
							style="max-width: 500rpx;max-height:350rpx;" v-if="item.image.length == 1"></image>
						<image src="../../../../static/lyc.jpg" v-for="item in 9" mode="aspectFill" v-else
							class="bg-secondary mr-2 mb-2 rounded" style="width: 160rpx;height:180rpx;"></image>
					</block>
				</view>
				<view class="justify-between flex align-center">
					<text class="font-sm text-light-muted ">{{item.create_time}}</text>
					<view class="rounded px-1 bg-light">
						<text class="text-hover-primary iconfont font">&#xe62a;</text>
					</view>

				</view>
			</view> -->

		</view>
		<free-popup ref="extend" bodyColor="bg-dark" fixedBottom maskColor>

			<view style="height: 105rpx;" class="bg-white  flex align-center px-3">
				<textarea placeholder="请输入" v-model="content" fixed class=" bg-white rounded p-2 font-md"
					style="width: 520rpx; height:75rpx" :adjust-position="false"></textarea>
				<free-icon-button  @click="openface()">&#xe605;</free-icon-button>

				<view class="rounded mr-3 px-2 py-1" :class="content!==''?'main-bg-color':'bg-white'">
					<text class="font" @click="send" :class="content!==''?'text-white':'text-muted'">发送</text>


				</view>
			</view>
			<scroll-view scroll-y="true" style="height: 350rpx;" v-show="facemodel" class="bg-light flex flex-wrap">
				<view @click="addFace(item)" style="height: 107rpx;width: 107rpx;float: left;" v-for="item in faceList" class="flex align-center justify-center" hover-class="bg-white">
					{{item}}
				</view>
			</scroll-view>
		</free-popup>
	</view>
</template>
<style>
	.bgwhit {
		background: rgba(255, 255, 255, 0.5);
	}

	.bgtrans {
		background: rgba(255, 255, 255, 0);
	}

	.colwhit {
		color: #000;
	}

	.coltrans {
		color: #fff;
	}

	.overflow {
		overflow: hidden;
	}
</style>
<script>
	import freePopup from "@/components/free-ui/free-popup.vue"
	import freeAvater from "@/components/free-ui/free-avater.vue"
	import freeTransparentBar from "@/components/free-ui/free-transparent-bar.vue"
	import freeIconButton from "@/components/free-ui/free-icon-button.vue"
	import freeMomentList from "@/components/free-ui/free-moment-list.vue"
	export default {
		components: {
			freeTransparentBar,
			freeIconButton,
			freeAvater,
			freeMomentList,
			freePopup
		},
		data() {
			return {
				extend: false,
				facemodel:false,
				num: 0,
				content: "",
				faceList:["😀","😁","😂","😃","😄","😅","😆","😉","😊","😋","😎","😍","😘","😗","😙","😚","😇","😐","😑","😶","😏","😣","😥","😮","😯","😪","😫","😴","😌","😛","😜","😝","😒","😓","😔","😕","😲","😷","😖","😞","😟","😤","😢","😭","😦","😧","😨","😬","😰","😱","😳","😵","😡","😠"],
				
				list: [{
						id: 1,
						avatar: "https://profile-avatar.csdnimg.cn/3365568353cd44c2acf217ab8b6345f9_weixin_47365777.jpg!1",
						username: '赵奕航',
						content: "这是赵奕航的第一条朋友圈,赵奕航没JJ,赵奕航没JJ,赵奕航没JJ,赵奕航没JJ,赵奕航没JJ,赵奕航没JJ,赵奕航没JJ",
						image: [{
							src: "https://profile-avatar.csdnimg.cn/3365568353cd44c2acf217ab8b6345f9_weixin_47365777.jpg!1"
						}],
						video: false,

						create_time: 1567481668,
						supports: [{
							id: 1,
							avatar: "https://profile-avatar.csdnimg.cn/3365568353cd44c2acf217ab8b6345f9_weixin_47365777.jpg!1",
							username: '赵奕航',

						}],
						comments: [{
								id: 1,
								content: "评论1",
								username: '李永超',

							},
							{
								id: 2,
								content: "评论1",
								username: '李永超',

							},
						]
					},
					{
						id: 2,
						avatar: "https://profile-avatar.csdnimg.cn/3365568353cd44c2acf217ab8b6345f9_weixin_47365777.jpg!1",
						username: '赵奕航',
						content: "这是赵奕航的第一条朋友圈,赵奕航没JJ,赵奕航没JJ,赵奕航没JJ,赵奕航没JJ,赵奕航没JJ,赵奕航没JJ,赵奕航没JJ",
						image: [{
								src: "https://profile-avatar.csdnimg.cn/3365568353cd44c2acf217ab8b6345f9_weixin_47365777.jpg!1"
							},
							{
								src: "https://profile-avatar.csdnimg.cn/3365568353cd44c2acf217ab8b6345f9_weixin_47365777.jpg!1"
							}
						],
						video: false,
						create_time: 1567481668,
						supports: [{
							id: 1,
							avatar: "https://profile-avatar.csdnimg.cn/3365568353cd44c2acf217ab8b6345f9_weixin_47365777.jpg!1",
							username: '赵奕航',

						}],
						comments: [{
								id: 1,
								content: "评论1",
								username: '李永超',

							},
							{
								id: 2,
								content: "评论1",
								username: '李永超',

							},
						]
					}
				],
			}
		},
		filters: {
			formatTime(value) {
				return $Time.gettime(value)
			}
		},
		onPageScroll(e) {
			console.log(e.scrollTop, "e");
			let start = uni.upx2px(500)
			let end = uni.upx2px(620)
			let H = end - start;
			this.num = 0;
			if (e.scrollTop > start) {
				this.num = (e.scrollTop - start) / H

			}
			console.log(this.num, "num")
			return this.num > 1 ? 1 : this.num

		},
		methods: {
			addmoment(){
				let list=[
					{
						name:"图文",
						key:"image"
					},
					{
						name:"短视频",
						key:"video"
					},
					{
						name:"文字",
						key:"text"
					},
				]
				uni.showActionSheet({
					itemList:list.map(item=>item.name),
					success: (res) => {
						console.log(res)
						
				uni.navigateTo({
					
					url:`/pages/tabbar/find/addmoment/addmoment?type=${list[res.tapIndex].key}`
				})						
					}
				})

			},
			openface(){
				this.facemodel=!this.facemodel
			},
			send(){
				if(this.content !== ''){
					
				}
			},
			addFace(item){
				this.content+=item
			},
			actionclick(e) {
				console.log(e, "ee");
				uni.showActionSheet({
					itemList: ['点赞', '评论'],
					success: res => {
						console.log(res, "res");
						if (res.tapIndex == 0) {
							this.support(e)
						} else {
							this.comment(e)
						}
					}
				})
			},
			support(e) {
				console.log(e, "点赞");
				this.list[e.index].supports.push({

					id: 2,
					avatar: "https://profile-avatar.csdnimg.cn/3365568353cd44c2acf217ab8b6345f9_weixin_47365777.jpg!1",
					username: '李永超',


				})
			},
			comment(e) {
				this.$refs.extend.show();
				this.extend = true
			},

			back() {

			},
		}
	}
</script>

<style>

</style>
